<template>
	<!-- 车辆基本信息 -->
	<view class="card">
		<view class="vehicle-info">
			<image class="vehicle-image" :src="vehicleInfo.image" mode="aspectFill"></image>
			<view class="vehicle-details">
				<text class="vehicle-name">{{ vehicleInfo.name }}</text>
				<text class="vehicle-plate">VIN：{{ vehicleInfo.plateNumber }}</text>
				<view class="vehicle-status">
					<text class="status-badge" :class="vehicleInfo.statusClass">{{ vehicleInfo.status }}</text>
					<text class="progress-text">已处理 {{ vehicleInfo.completedSteps }}/{{ vehicleInfo.totalSteps }}
						项</text>
				</view>
			</view>
		</view>

		<view style="display: flex;justify-content: space-between;align-items: center;margin: 20rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;flex-direction: column;">
				<text style="color: #6B7280;font-size: 12px;">采购价格</text>
				<text style="color: #1F2937;font-weight: 600;font-size: 20px;">285,500</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;flex-direction: column;">
				<text style="color: #6B7280;font-size: 12px;">目标港口</text>
				<text style="color: #1F2937;font-weight: 600;font-size: 20px;">上海</text>
			</view>
		</view>
	</view>

	<!-- 流程进度 -->
	<view class="card  progress-section">
		<text class="section-title">流程进度</text>
		<view class="progress-list">
			<view class="progress-item" v-for="(step, index) in progressSteps" :key="index"
				:class="{ completed: step.completed, current: step.current }">
				<view class="progress-icon" :class="step.iconClass">
					<text class="iconfont" :class="step.icon"></text>
				</view>
				<view class="progress-content">
					<view class="progress-header">
						<text class="progress-title">{{ step.title }}</text>
						<text class="progress-status" :class="step.statusClass">{{ step.status }}</text>
					</view>
					<text class="progress-desc">{{ step.description }}</text>
					<view class="progress-bar" v-if="step.current">
						<view class="progress-fill" :style="{ width: step.progress + '%' }"></view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 车辆信息 -->
	<view class="card">
		<text class="card_title">车辆信息</text>
		<view class="info-grid">
			<view class="info-item" v-for="(info, index) in vehicleDetails" :key="index">
				<text class="info-label">{{ info.label }}</text>
				<text class="info-value" :class="info.valueClass">{{ info.value }}</text>
			</view>
		</view>
	</view>

	<!-- 资料清单 -->
	<view class="documents-section">
		<view class="section-header">
			<text class="section-title">资料清单</text>
			<text class="section-link" @click="manageDocuments">管理资料</text>
		</view>
		<view class="documents-list">
			<view class="document-item" v-for="(doc, index) in documents" :key="index" :class="doc.statusClass">
				<view class="document-icon" :class="doc.iconClass">
					<text class="iconfont" :class="doc.icon"></text>
				</view>
				<view class="document-content">
					<text class="document-name">{{ doc.name }}</text>
				</view>
				<text class="document-status" :class="doc.statusTextClass">{{ doc.status }}</text>
			</view>
		</view>
	</view>

	<view class="card">
		<text class="card_title">负责人</text>
		<view style="display: flex;align-items: center;justify-content: space-between;">
			<image src="/static/logo.png" mode="aspectFit" style="width: 100rpx;height: 100rpx;border-radius: 50%;">
			</image>
			<view style="display: flex;flex-direction: column;">
				<text style="color: #1F2937;">陈经理</text>
				<text style="color: #6B7280;">采购员 业务部</text>
			</view>
			<view
				style="width: 90rpx;height: 90rpx;background-color: #DBEAFE;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
				<text class="iconfont icon-dianhua" style="font-size: 30px;font-weight: 600;color: #2563EB;"></text>
			</view>
			<view
				style="width: 90rpx;height: 90rpx;background-color: #DCFCE7;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
				<text class="iconfont icon-message_full"
					style="font-size: 20px;font-weight: 600;color: #16A34A;"></text>
			</view>
		</view>
	</view>
	<!-- 操作按钮 -->
	<view style="display: flex;justify-content: space-between;padding: 25rpx 0;">
		<button style="background-color: #2563EB;" class="action-btn" @click="updateInspectionStatus" v-if="canUpdateInspection">
			更新状态
		</button>
		<button style="background-color: #E5E7EB;" class="action-btn" @click="updateInspectionStatus" v-if="canUpdateInspection">
			添加备注
		</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		permissionManager,
		ROLES
	} from '../../utils/permission.js'

	// 响应式数据
	const vehicleInfo = reactive({
		name: 'BMW X5 2020款',
		plateNumber: 'LCIOWIWHFI5845454',
		status: '采购中',
		statusClass: 'status-purchasing',
		image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=80&h=80&fit=crop&crop=center',
		completedSteps: 2,
		totalSteps: 8
	})

	const progressSteps = ref([{
			title: '采购阶段',
			description: '采购员：张经理 | 完成时间：2024-01-15',
			status: '已完成',
			statusClass: 'completed-status',
			completed: true,
			current: false,
			icon: 'icon-check',
			iconClass: 'completed-icon'
		},
		{
			title: '检测阶段',
			description: '查博士检测 | 预计完成：今天',
			status: '进行中',
			statusClass: 'current-status',
			completed: false,
			current: true,
			progress: 80,
			icon: 'icon-spinner',
			iconClass: 'current-icon'
		},
		{
			title: '交易阶段',
			description: '代驾取车 | 财务打款',
			status: '待处理',
			statusClass: 'pending-status',
			completed: false,
			current: false,
			icon: 'icon-car',
			iconClass: 'pending-icon'
		},
		{
			title: '数据录入',
			description: '金蝶ERP系统录入',
			status: '待处理',
			statusClass: 'pending-status',
			completed: false,
			current: false,
			icon: 'icon-database',
			iconClass: 'pending-icon'
		},
		{
			title: '过户处理',
			description: '服务站过户 | 资料管理',
			status: '待处理',
			statusClass: 'pending-status',
			completed: false,
			current: false,
			icon: 'icon-file',
			iconClass: 'pending-icon'
		},
		{
			title: '出口准备',
			description: '码头分配 | 物流安排',
			status: '待处理',
			statusClass: 'pending-status',
			completed: false,
			current: false,
			icon: 'icon-ship',
			iconClass: 'pending-icon'
		}
	])

	const vehicleDetails = ref([{
			label: '品牌型号',
			value: 'BMW X5 2020款'
		},
		{
			label: '车牌号码',
			value: '京A12345'
		},
		{
			label: '车架号',
			value: 'WBA5A7C50FD123456'
		},
		{
			label: '发动机号',
			value: 'B58B30M1'
		},
		{
			label: '颜色',
			value: '碳黑色'
		},
		{
			label: '里程数',
			value: '45,000 km'
		},
		{
			label: '采购价格',
			value: '¥458,000'
		},
		{
			label: '检测等级',
			value: 'S级',
			valueClass: 'grade-value'
		}
	])

	const reportInfo = reactive({
		status: '进行中',
		statusClass: 'report-status-progress'
	})

	const reportDetails = ref([{
			label: '检测项目',
			value: '外观/内饰/机械/电子'
		},
		{
			label: '检测进度',
			value: '80%',
			valueClass: 'progress-value'
		},
		{
			label: '预计完成',
			value: '今天 18:00'
		},
		{
			label: '检测员',
			value: '李师傅'
		}
	])

	const documents = ref([{
			name: '绿本',
			status: '已上传',
			statusClass: 'document-completed',
			statusTextClass: 'completed-text',
			icon: 'icon-check-circle',
			iconClass: 'completed-icon'
		},
		{
			name: '保险单',
			status: '已上传',
			statusClass: 'document-completed',
			statusTextClass: 'completed-text',
			icon: 'icon-check-circle',
			iconClass: 'completed-icon'
		},
		{
			name: '行驶证',
			status: '等待中',
			statusClass: 'document-waiting',
			statusTextClass: 'waiting-text',
			icon: 'icon-clock',
			iconClass: 'waiting-icon'
		},
		{
			name: '过户委托书',
			status: '缺失',
			statusClass: 'document-missing',
			statusTextClass: 'missing-text',
			icon: 'icon-times-circle',
			iconClass: 'missing-icon'
		}
	])

	// 方法
	const goBack = () => {
		uni.navigateBack()
	}

	const showMenu = () => {
		uni.showActionSheet({
			itemList: ['编辑车辆', '删除车辆', '分享车辆'],
			success: (res) => {
				console.log('选择了第' + (res.tapIndex + 1) + '个按钮')
			}
		})
	}

	const viewReport = () => {
		uni.navigateTo({
			url: '/pages/report/report'
		})
	}

	const manageDocuments = () => {
		uni.navigateTo({
			url: '/pages/documents/documents'
		})
	}

	const updateInspectionStatus = () => {
		uni.showToast({
			title: '状态更新功能开发中',
			icon: 'none'
		})
	}

	const contactInspector = () => {
		uni.showToast({
			title: '联系功能开发中',
			icon: 'none'
		})
	}

	// 权限检查方法
	const canUpdateInspection = computed(() => {
		return permissionManager.canEditStatus('inspecting')
	})

	const canContactInspector = computed(() => {
		return permissionManager.canPerformOperation('contact', 'inspector')
	})

	const canViewReport = computed(() => {
		return permissionManager.canPerformOperation('view', 'report')
	})

	const canEditVehicle = computed(() => {
		return permissionManager.canPerformOperation('edit')
	})

	const viewFullReport = () => {
		if (!canViewReport.value) {
			uni.showToast({
				title: '没有查看报告权限',
				icon: 'none'
			})
			return
		}

		uni.navigateTo({
			url: '/pages/report/report'
		})
	}

	const editVehicle = () => {
		if (!canEditVehicle.value) {
			uni.showToast({
				title: '没有编辑权限',
				icon: 'none'
			})
			return
		}

		uni.showToast({
			title: '编辑功能开发中',
			icon: 'none'
		})
	}

	// 生命周期
	onMounted(() => {
		loadVehicleDetail()
	})

	const loadVehicleDetail = () => {
		// 这里可以调用API获取车辆详情
		console.log('加载车辆详情')
	}
</script>

<style lang="scss" scoped>
	.card {
		margin: 32rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);

		&_title {
			color: #1F2937;
			font-size: 17px;
			font-weight: 600;
			margin-bottom: 18rpx;
			display: flex;
		}
	}


	// .vehicle-detail-container {
	// 	background-color: #f8fafc;
	// 	min-height: 100vh;
	// }

	.vehicle-header {
		background: white;
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.vehicle-info {
		display: flex;
		align-items: center;
	}

	.vehicle-image {
		width: 80px;
		height: 80px;
		border-radius: 12px;
		margin-right: 16px;
	}

	.vehicle-details {
		flex: 1;
	}

	.vehicle-name {
		font-size: 20px;
		font-weight: bold;
		color: #1f2937;
		display: block;
		margin-bottom: 4px;
	}

	.vehicle-plate {
		font-size: 14px;
		color: #6b7280;
		display: block;
		margin-bottom: 8px;
	}

	.vehicle-status {
		display: flex;
		align-items: center;
	}

	.status-badge {
		padding: 6px 12px;
		background: #dbeafe;
		color: #3b82f6;
		border-radius: 12px;
		font-size: 12px;
		font-weight: 500;
		margin-right: 8px;
	}

	.progress-text {
		font-size: 12px;
		color: #6b7280;
	}

	.progress-section,
	.info-section,
	.documents-section {
		background: white;
		margin: 32rpx;
		border-radius: 12px;
		padding: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #1f2937;
		display: block;
		margin-bottom: 16px;
	}

	.progress-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.progress-item {
		display: flex;
		align-items: flex-start;
	}

	.progress-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.completed-icon {
		background: #3b82f6;
		color: white;
	}

	.current-icon {
		background: #3b82f6;
		color: white;
	}

	.pending-icon {
		background: #d1d5db;
		color: #6b7280;
	}

	.progress-content {
		flex: 1;
	}

	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4px;
	}

	.progress-title {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
	}

	.progress-status {
		font-size: 12px;
	}

	.completed-status {
		color: #10b981;
	}

	.current-status {
		color: #3b82f6;
	}

	.pending-status {
		color: #6b7280;
	}

	.progress-desc {
		font-size: 12px;
		color: #6b7280;
		display: block;
		margin-bottom: 8px;
	}

	.progress-bar {
		width: 100%;
		height: 8px;
		background: #e5e7eb;
		border-radius: 4px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: #3b82f6;
		border-radius: 4px;
		transition: width 0.3s ease;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-label {
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 4px;
	}

	.info-value {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
	}

	.grade-value {
		color: #3b82f6;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.section-link {
		font-size: 14px;
		color: #3b82f6;
	}


	.progress-value {
		color: #3b82f6;
	}

	.documents-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.document-item {
		display: flex;
		align-items: center;
		padding: 12px;
		border-radius: 8px;
	}

	.document-completed {
		background: #f0fdf4;
		border-left: 4px solid #10b981;
	}

	.document-waiting {
		background: #fffbeb;
		border-left: 4px solid #f59e0b;
	}

	.document-missing {
		background: #fef2f2;
		border-left: 4px solid #ef4444;
	}

	.document-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.completed-icon {
		background: #dcfce7;
		color: #10b981;
	}

	.waiting-icon {
		background: #fef3c7;
		color: #f59e0b;
	}

	.missing-icon {
		background: #fee2e2;
		color: #ef4444;
	}

	.document-content {
		flex: 1;
	}

	.document-name {
		font-size: 14px;
		color: #1f2937;
	}

	.document-status {
		font-size: 12px;
	}

	.completed-text {
		color: #10b981;
	}

	.waiting-text {
		color: #f59e0b;
	}

	.missing-text {
		color: #ef4444;
	}

	.action-section {
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.action-btn {
		padding: 10rpx 80rpx;
		color: #FFFFFF;
		border-radius: 15rpx;
		font-size: 14px;
		font-weight: 500;
	}
	
	.action-btn::after{
		border: none;
	}

	.primary-btn {
		background: #3b82f6;
		color: white;
	}

	.secondary-btn {
		background: #f3f4f6;
		color: #6b7280;
	}
</style>